<template>
  <view class="select">
    <!-- 搜索 -->
    <Lampsearch></Lampsearch>
    <!-- 轮播图 -->
    <view class="selectSwiper">
      <Lampswiper :swiperlist="swiperlist" :swiperct="swiperct"> </Lampswiper>
    </view>
    <!-- 品牌购 -->
    <Lampgeneral class="brand" title="品牌购">
      <view class="vul" v-if="brandlist.status==='success'">
        <view class="vli" v-for="(item,index) in brandlist.list" :key="index" @click="searchList(item.id)">
          <image :src="item.image_url" mode=""></image>
        </view>
      </view>
    </Lampgeneral>
    <!-- 好友帮砍 -->
    <Lampgeneral title="好友帮砍" class="Helpcut">
         <view class="hul">
           <view class="hli" v-for="(item,index) in ptkjlist.kanjialist" :key="index">
             <view class="hleft">
               <image :src="item.image_url" mode=""></image>
             </view>
             <view class="hright">
               <view class="htitle">
                 {{item.name}}
               </view>
               <view class="kanprice">
                 最低砍至￥{{item.unit_price}}
               </view>
               <view class="hbutton">
                 <u-button :custom-style="customStyle" size="mini" :plain="true" shape="circle" :ripple="true" @click="tiaozhuan(item.id)">立即砍价
                 </u-button>
               </view>
             </view>
           </view>
         </view>
       </Lampgeneral>
       <!-- 好物一起拼 -->
       <Lampgeneral title="好物一起拼" class="Spell">
         <view class="sul">
           <view class="sli" v-for="(item,index) in ptkjlist.pintuanlinst" :key="index">
             <view class="stop">
               <image :src="item.image_url" mode=""></image>
             </view>
             <view class="sbottom">
               <view class="htitle">
                 {{item.name}}
               </view>
               <view class="group">
                 已拼团20件
               </view>
               <view class="sprice">
                 ￥{{item.unit_price}}
               </view>
               <view class="sbutton">
                 <u-button :custom-style="customStyle" size="mini" :plain="true" shape="circle" :ripple="true" @click="tiaozhuanpt(item.id)">去拼团
                 </u-button>
               </view>
             </view>
           </view>
         </view>
       </Lampgeneral>
    <Lampseckill></Lampseckill>
    <Lampfooter></Lampfooter>
  </view>
</template>

<script setup>
  import Lampsearch from "/src/components/Lampsearch/Lampsearch.vue"
  import Lampswiper from "/src/components/Lampswiper/Lampswiper.vue"
  import Lampgeneral from "/src/components/Lampgeneral/Lampgeneral.vue"
  import Lampfooter from "/src/components/Lampfooter/Lampfooter.vue"
  import Lampseckill from "/src/components/Lampseckill/Lampseckill.vue"
  import {
    reactive
  } from 'vue'
  import {
      goodsStore
    } from "../../store/goods.js"
   const goodStore =  goodsStore()
  const {brandlist,ptkjlist} =  goodStore
 //发送请求获取品牌列表
 goodStore.getbrand()
//获取砍价和拼团数据
goodStore.getptkjlist()
   //立即砍价按钮样式
    const customStyle = reactive({
      marginTop: '60rpx',
      color: '#ff4444',
       fontSize: '25rpx'
    })
    //定义传过去的轮播图组件样式
    const swiperct = reactive({
      title: true,
      indicatorPos: "topLeft",
      titleStyle: {
        backgroundColor: 'transparent',
        color: '#ffffff'
      }
  
    })
  //定义传过去的轮播图列表
  const swiperlist = reactive([{
      image: 'https://17597658.s61i.faimallusr.com/2/AD0I2omyCBACGAAgvd6C3QUohaClfzDuBTjxAg.jpg',
      title: '马卡龙吊灯，让家多一点色彩'
    },
    {
      image: 'https://17597658.s61i.faimallusr.com/2/AD0I2omyCBACGAAgvd6C3QUopJu45gUw7gU48QI.jpg',
      title: '餐厅灯小吊灯北欧现代简约灯具'
    },
    {
      image: 'https://17597658.s61i.faimallusr.com/2/AD0I2omyCBACGAAgvd6C3QUoiqL-ugMw7gU48QI.jpg',
      title: '创意个性三头艺术餐桌饭厅钻石吧台'
    }
  ])
  //跳转商品列表
  function searchList(id){
    uni.navigateTo({
      url:`/subPack/SearchList/SearchList?xuanzppfl=${id}`
    })
  }
  //跳转页面
  function tiaozhuan(goodid) {
    uni.navigateTo({
      url: `/subPack/kanjia/kanjia?goods_id=${goodid}`
    })
  }
  //跳转页面
  function tiaozhuanpt(goodid) {
    uni.navigateTo({
      url: `/subPack/pintuan/pintuan?goods_id=${goodid}`
    })
  }
 
</script>

<style scoped lang="scss">
  .select {
    .selectSwiper {
      margin-top: 20rpx;
      
    }

    //品牌购
    .brand {
      .vul {
        margin-top: 20rpx;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .vli:nth-child(n+5) {
          margin-top: 15rpx;
        }
        .vli {
          image {
            width: 160rpx;
            height: 130rpx;
          }
        }
      }
    }

    // 好友帮砍
    .Helpcut {
      .hul {
        .hli:nth-child(n+2) {
          margin-top: 20rpx;
        }

        .hli {
          display: flex;
          border-radius: 10rpx;
          box-shadow: 2rpx 2rpx 10rpx 2rpx #dadada;

          .hleft {
            margin: 10rpx;
height: 220rpx;
            image {
              border-radius: 10rpx;
              width: 220rpx;
              height: 220rpx;
            }
          }

          .hright {
            padding-right: 50rpx;
            padding-left: 20rpx;

            .htitle {
              margin-top: 30rpx;
              font-size: 32rpx;
              color: #353535;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }

            .kanprice {
              display: inline-block;
              font-size: 30rpx;
              color: #ff4444;
              margin-top: 60rpx;
            }

            .hbutton {
              float: right;
            }
          }
        }
      }
    }

    //一起来拼团
    .Spell {
      .sul {
        .sli:nth-child(n+2) {
          margin-top: 30rpx;
        }

        .sli {
          box-shadow: 2rpx 2rpx 10rpx 2rpx #dadada;
           border-radius: 10rpx;
          .stop {
            text-align: center;

            image {
              margin-top: 2rpx;
              width: 300rpx;
              height: 300rpx;
            }
          }

          .sbottom {
            padding: 20rpx 30rpx;

            .htitle {
              color: #353535;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 32rpx
            }

            .group {
              margin-top: 40rpx;
              color: #999999;
              font-size: 25rpx;
            }

            .sprice {
              margin-top: 20rpx;
              font-size: 25rpx;
              color: #ff4444;
              display: inline-block;
            }

            .sbutton {
              float: right;
              margin-top: -60rpx;

            }
          }
        }
      }
    }
  }
</style>
